<template>
  <div>
    <Header :left="true" leftText="返回" title="维修记录" />
    <div>
      <van-collapse v-model="activeNames">
        <van-collapse-item title="点击查询" name="1">
          <van-cell-group>
            <van-field v-model="queryParams.requestCode" label="报修编码" placeholder="请输入报修编码" />
            <van-field v-model="queryParams.equipCode" label="设备编码" placeholder="请输入设备编码" />
            <van-field v-model="queryParams.requestUser" label="报修人" placeholder="请输入报修人" />
            <van-field v-model="queryParams.repairUser" label="维修人" placeholder="请输入维修人" />

            <Button
              block
              class="buttonDown"
              color="#138087"
              @click="quertPointCheckTableList"
              >查询</Button
            >
            <Button block class="buttonDown" color="#f58220" @click="clearParams"
              >清除</Button
            >
          </van-cell-group>
        </van-collapse-item>
      </van-collapse>
    </div>
    <div class="selectdTextScroll">
      <!-- 分页控件 -->
      <van-pagination
        width="this.screenWidth"
        class="pagination"
        force-ellipses
        v-model="queryParam.pageNum"
        :total-items="queryParam.total"
        @change="pgn_change_read"
        :items-per-page="queryParam.pageSize"
      />
      <v-table
        is-horizontal-resize
        style="width:100%;"
        :show-vertical-border="true"
        :columns="columns"
        :table-data="tableData"
        :row-click="rowClick"
        row-hover-color="#eee"
        row-click-color="#edf7ff"
      ></v-table>
    </div>

    <!-- 开始时间 -->
    <van-popup v-model="startTimeSelect" round position="bottom">
      <van-datetime-picker
        v-model="valueStr"
        type="datetime"
        title="选择开始时间"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onConfirmStart"
        @cancel="startConcel"
      />
    </van-popup>

    <!-- 结束时间 -->
    <van-popup v-model="endTimeSelect" round position="bottom">
      <van-datetime-picker
        v-model="valueEnd"
        type="datetime"
        title="选择时间"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onConfirmEnd"
        @cancel="endConcel"
      />
    </van-popup>
  </div>
</template>
<script>
import {
  Icon,
  DropdownMenu,
  DropdownItem,
  Button,
  CellGroup,
  Cell,
  Field,
  popup,
  Col,
  Row,
  Image as VanImage,
  Checkbox,
  Pagination,
  Search,
  Sticky,
  Picker,
  Toast,
  Dialog,
  Divider,
  Calendar,
  Collapse,
  CollapseItem,
  DatetimePicker,
} from 'vant'
Vue.use(DatetimePicker)
Vue.use(Divider)
Vue.use(Calendar)
Vue.use(Field)
Vue.use(popup)
Vue.use(Col)
Vue.use(Row)
Vue.use(Picker)
Vue.use(Pagination)
Vue.use(VanImage)
Vue.use(Collapse)
Vue.use(CollapseItem)
Vue.use(Dialog)
import { _httpClient } from '@/libs/api'
import F2 from '@antv/f2/lib/index-all'
import Header from '@/components/header.vue'
import { VTable } from 'vue-easytable'
import 'vue-easytable/libs/themes-base/index.css'
import { storage } from '@/libs/utils'
import { removeToken, getToken, setBaseApiFrefix, getBaseApiFrefix } from '@/libs/auth'
export default {
  components: {
    Button,
    Header,
    Icon,
    CellGroup,
    Cell,
    Field,
    Col,
    Row,
    Search,
    Sticky,
    DropdownMenu,
    DropdownItem,
    Divider,
    VTable,
    Dialog,
  },

  data() {
    return {
      activeNames: ['0'],
      user: [],
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2030, 11, 31),

      dpIndex: 0,
      startTimeSelect: false,
      endTimeSelect: false,
      screenWidth: 0,
      queryParam: {
        taskCode: null,
        equipName: null,
        taskType: null,
        taskTypeName: null,
        startTime: null,
        endTime: null,
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      currentTaskType: null,
      valueStr: null, //开始时间查询条件
      valueEnd: null, //结束时间查询条件
      valueStrTime: null, //开始时间查询条件
      valueEndTime: null, //结束时间查询条件
      tableData: [
        // { seqNum: '1', description: '质量部', equipName: '30', eqStatus: '20', department: '40', techTask: '50' },
        // { seq: '1', department: '工艺部', dayTask: '30', weekTask: '20', monthTask: '40', techTask: '50' },
        // { seq: '1', department: '生产部', dayTask: '30', weekTask: '20', monthTask: '40', techTask: '50' },
      ],
      pointColumns: [
        //点检表格列头
        {
          field: 'seqNum',
          title: '序号',
          width: 50,
          titleAlign: 'center',
          columnAlign: 'center',
          isResize: true,
          titleCellClassName: 'title-cell-class-name-test',
        },
        {
          field: 'siteName',
          title: '工厂',
          width: 90,
          titleAlign: 'center',
          columnAlign: 'center',
          isResize: true,
          titleCellClassName: 'title-cell-class-name-test',
        },
        {
          field: 'requestCode',
          title: '报修单号',
          width: 170,
          titleAlign: 'center',
          columnAlign: 'center',
          isResize: true,
          titleCellClassName: 'title-cell-class-name-test',
        },
        {
          field: 'equipCode',
          title: '设备编码',
          width: 100,
          titleAlign: 'center',
          columnAlign: 'center',
          isResize: true,
          titleCellClassName: 'title-cell-class-name-test',
        },
        {
          field: 'equipName',
          title: '设备名称',
          width: 100,
          titleAlign: 'center',
          columnAlign: 'center',
          isResize: true,
          titleCellClassName: 'title-cell-class-name-test',
        },
        {
          field: 'faultType',
          title: '故障类型',
          width: 150,
          titleAlign: 'center',
          columnAlign: 'center',
          titleCellClassName: 'title-cell-class-name-test',
          isResize: true,
        },
        {
          field: 'statusName',
          title: '状态',
          width: 100,
          titleAlign: 'center',
          columnAlign: 'center',
          titleCellClassName: 'title-cell-class-name-test',
          isResize: true,
        },
        {
          field: 'requestUserName',
          title: '报修人',
          width: 100,
          titleAlign: 'center',
          columnAlign: 'center',
          titleCellClassName: 'title-cell-class-name-test',
          isResize: true,
        },
        {
          field: 'requestTime',
          title: '报修时间',
          width: 180,
          titleAlign: 'center',
          columnAlign: 'center',
          titleCellClassName: 'title-cell-class-name-test',
          isResize: true,
        },

        {
          field: 'checkUserName',
          title: '审核人',
          width: 100,
          titleAlign: 'center',
          columnAlign: 'center',
          titleCellClassName: 'title-cell-class-name-test',
          isResize: true,
        },
        {
          field: 'checkTime',
          title: '审核时间',
          width: 180,
          titleAlign: 'center',
          columnAlign: 'center',
          isResize: true,
          titleCellClassName: 'title-cell-class-name-test',
        },
        {
          field: 'repairUserName',
          title: '维修人',
          width: 100,
          titleAlign: 'center',
          columnAlign: 'center',
          titleCellClassName: 'title-cell-class-name-test',
          isResize: true,
        },
      ],
      queryParams: {
        siteKey: null,
        department: null,
        startTime: null,
        endTime: null,
        type: null,
        requestCode: null,
        equipCode: null,
        requestUser: null,
        repairUser: null,
      }, //查询条件
      columns: [],
      sites: [], //工厂
      departments: [], //部门
      data1: [], //饼图数据
      data: [],
    }
  },
  created: function() {
    let oldHight = api.winWidth
    this.screenWidth = oldHight
    //获取当前系统登录用户
    this.user = JSON.parse(storage.get('user'))
    //初始化设置弹窗高度
    // this.autoHeight.height = '100px'
    //表格列头初始化
    this.columns = this.pointColumns

    //查询条件初始化
    this.queryParams.type = api.pageParam.type
    this.queryParams.siteKey = api.pageParam.siteKey
    this.queryParams.startTime = api.pageParam.startTime
    this.queryParams.endTime = api.pageParam.endTime
    this.queryParams.pageNum = 1
    this.queryParams.department = api.pageParam.department

    this.minDate = new Date(new Date().getFullYear() - 3, 0, 1)
    this.maxDate = new Date(new Date().getFullYear() + 3, 0, 1)

    //默认查询时间
    this.queryParam.startTime = this.formatDateStart(new Date())
    this.queryParam.endTime = this.formatDateEnd(new Date())

    this.quertPointCheckTableList()
  },
  mounted: function() {
    //数据查询
    // this.queryPointCheckData()
  },

  methods: {
    pgn_change_read() {
      this.quertPointCheckTableList()
    },
    //清除查询条件
    clearParams() {
      this.queryParams.requestCode = null
      this.queryParams.equipCode = null
      this.queryParams.pageNum = 1
      this.queryParams.requestUser = null
      this.queryParams.repairUser = null

      this.quertPointCheckTableList()
    },
    //打开开始时间选择
    openStartTime() {
      this.startTimeSelect = true
      // this.valueStr = new Date(this.formatDate(new Date()))
      this.valueStr = new Date()
      let currentDate = new Date()
      let currentShifDate = new Date()
      currentShifDate.setHours(20)
      currentShifDate.setMinutes(30)
      currentShifDate.setSeconds(0)
      if (currentDate.getTime() >= currentShifDate.getTime()) {
        this.valueStr.setHours(20)
      } else {
        this.valueStr.setHours(8)
      }

      this.valueStr = new Date()
      let currentDate2 = new Date()
      let currentShifDate2 = new Date()
      currentShifDate2.setHours(8)
      currentShifDate2.setMinutes(30)
      currentShifDate2.setSeconds(0)
      if (currentDate2.getTime() < currentShifDate2.getTime()) {
        this.valueStr.setDate(currentDate2.getDate() - 1)
        this.valueStr.setHours(20)
      } else {
        this.valueStr.setHours(8)
      }

      this.valueStr.setMinutes(30)
      this.valueStr.setSeconds(0)
    },
    //开始时间确定
    onConfirmStart(date) {
      this.valueStr = this.formatDate2(date)
      this.queryParam.startTime = this.valueStr
      this.startTimeSelect = false
    },

    //打开结束时间选择
    openEndTime() {
      this.endTimeSelect = true
      this.valueEnd = new Date()
      let currentDate = new Date()
      let currentShifDate = new Date()
      currentShifDate.setHours(20)
      currentShifDate.setMinutes(30)
      currentShifDate.setSeconds(0)
      if (currentDate.getTime() >= currentShifDate.getTime()) {
        this.valueEnd.setDate(currentDate.getDate() + 1)
        this.valueEnd.setHours(8)
      } else {
        this.valueEnd.setHours(20)
      }

      this.valueEnd = new Date()
      let currentDate2 = new Date()
      let currentShifDate2 = new Date()
      currentShifDate2.setHours(8)
      currentShifDate2.setMinutes(30)
      currentShifDate2.setSeconds(0)
      if (currentDate2.getTime() < currentShifDate2.getTime()) {
        this.valueEnd.setHours(8)
      } else {
        this.valueEnd.setHours(20)
      }

      this.valueEnd.setMinutes(30)
      this.valueEnd.setSeconds(0)
    },

    //结束时间确认
    onConfirmEnd(date) {
      this.valueEnd = this.formatDate2(date)
      this.queryParam.endTime = this.valueEnd
      this.endTimeSelect = false
    },

    //日期格式化
    formatDateStart(date) {
      let year = date.getFullYear()
      let mouth = date.getMonth() + 1
      if (mouth < 10) {
        mouth = '0' + mouth
      }
      let day = date.getDate()
      if (day < 10) {
        day = '0' + day
      }
      let currentDate = new Date()
      let currentShifDate = new Date()
      currentShifDate.setHours(20)
      currentShifDate.setMinutes(30)
      currentShifDate.setSeconds(0)

      if (currentDate.getTime() >= currentShifDate.getTime()) {
        return year + '-' + mouth + '-' + day + ' ' + '20' + ':' + '30' + ':' + '00'
      }

      let currentDate2 = new Date()
      let currentShifDate2 = new Date()
      currentShifDate2.setHours(8)
      currentShifDate2.setMinutes(30)
      currentShifDate2.setSeconds(0)
      if (currentDate2.getTime() < currentShifDate2.getTime()) {
        date.setDate(date.getDate() - 1)
        let day = date.getDate()
        if (day < 10) {
          day = '0' + day
        }
        return year + '-' + mouth + '-' + day + ' ' + '20' + ':' + '30' + ':' + '00'
      }

      return year + '-' + mouth + '-' + day + ' ' + '08' + ':' + '30' + ':' + '00'
    },

    //日期格式化
    formatDateEnd(date) {
      let currentDate = new Date()
      let currentShifDate = new Date()
      currentShifDate.setHours(20)
      currentShifDate.setMinutes(30)
      currentShifDate.setSeconds(0)
      if (currentDate.getTime() >= currentShifDate.getTime()) {
        date.setDate(date.getDate() + 1)
      }
      let year = date.getFullYear()
      let mouth = date.getMonth() + 1
      if (mouth < 10) {
        mouth = '0' + mouth
      }
      let day = date.getDate()
      if (day < 10) {
        day = '0' + day
      }

      if (currentDate.getTime() >= currentShifDate.getTime()) {
        return year + '-' + mouth + '-' + day + ' ' + '08' + ':' + '30' + ':' + '00'
      }

      let currentDate2 = new Date()
      let currentShifDate2 = new Date()
      currentShifDate2.setHours(8)
      currentShifDate2.setMinutes(30)
      currentShifDate2.setSeconds(0)
      if (currentDate2.getTime() < currentShifDate2.getTime()) {
        return year + '-' + mouth + '-' + day + ' ' + '08' + ':' + '30' + ':' + '00'
      }

      return year + '-' + mouth + '-' + day + ' ' + '20' + ':' + '30' + ':' + '00'
    },

    formatDate2(date) {
      let year = date.getFullYear()
      let mouth = date.getMonth() + 1
      let day = date.getDate()
      let hour = date.getHours()
      let min = date.getMinutes()
      if (mouth < 10) {
        mouth = '0' + mouth
      }
      if (day < 10) {
        day = '0' + day
      }
      if (hour < 10) {
        hour = '0' + hour
      }
      if (min < 10) {
        min = '0' + min
      }
      return year + '-' + mouth + '-' + day + ' ' + hour + ':' + min + ':' + '00'
    },

    //表格点击监听
    rowClick(rowIndex, columnName, rowData) {
      //跳转到明细页面
      this.$ac.openWin({
        name: 'repairRecordDetail',
        url: './report-repairRecordDetail.html',
        pageParam: {
          record: columnName,
        },
      })
    },

    //时间确认查询
    timeConfirm() {
      if (this.taskTypeIndex == 0) {
        //重新查询数据
        this.queryPointCheckData()
      } else {
        //重新查询数据
        this.quertRepairInfoList()
      }
    },
    //查询点检任务数据
    queryPointCheckData() {
      this.quertPointCheckTableList()
    },

    //查询点检表格数据
    async quertPointCheckTableList() {
      let _this = this

      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() +
            '/app/report/queryRequestAndRepair?pageNum=' +
            this.queryParam.pageNum +
            '&pageSize=' +
            this.queryParam.pageSize,
          {
            body: _this.queryParams,
          }
        )
        if (res.code === 200) {
          _this.tableData = res.rows
          _this.queryParam.total = res.total
        } else {
          alert(res.msg)
        }
      } catch (e) {
        alert(JSON.stringify(e))
      }
    },

    //查询维修任务信息
    async quertRepairInfoList() {
      let _this = this
      //部门
      let department
      if (_this.departments.length != 0 && _this.departments[_this.departIndex].value != 0) {
        department = _this.departments[_this.departIndex].text
      }
      //工厂
      let site
      if (_this.sites.length != 0) {
        site = _this.siteIndex
      }

      try {
        let res = await _httpClient.post(_httpClient.getApiPrefix() + '/app/report/repairList', {
          body: {
            siteKey: site,
            department: department,
            startTime: _this.valueStrTime,
            endTime: _this.valueEndTime,
            type: 1,
          },
        })
        if (res.code === 200) {
          _this.data = res.rows
          _this.tableData = res.rows
          //调用方法绘制柱形图
          _this.drawChart()
        } else {
          alert(res.msg)
        }
      } catch (e) {
        alert(JSON.stringify(e))
      }
    },

    //日期格式化
    formatDate(date) {
      let year = date.getFullYear()
      let mouth = date.getMonth() + 1
      if (mouth < 10) {
        mouth = '0' + mouth
      }
      let day = date.getDate()
      if (day < 10) {
        day = '0' + day
      }
      return year + '-' + mouth + '-' + day
    },

    //时间清空
    clearTime() {
      this.valueStr = ''
      this.valueEnd = ''
      if (this.taskTypeIndex == 0) {
        //重新查询数据
        this.queryPointCheckData()
      } else {
        //重新查询数据
        this.quertRepairInfoList()
      }
    },
  },
}
</script>
<style>
body {
  background-color: White;
}
.selectdTextScroll {
  display: inline-block;
  /* position: fixed; */
  top: 9rem;
  overflow: scroll;
  right: 0;
  width: 100%;
  height: 600px;
  z-index: 1;
}
.title-cell-class-name-test {
  background-color: #778899;
  color: #fff;
}
.buttonDown {
  float: right;
  margin-top: 5px;
  margin-left: 5px;
  width: 80px;
  height: 40px;
  font-size: 12px;
}
.pagination {
  position: fixed;
  bottom: 15px;
  width: 100%;
  color: rgb(0, 0, 255);
  text-align: center;
}
</style>
